<template>
    <div>
        <el-form-item
            v-if="activeData.prepend !== undefined"
            label="前缀"
        >
            <el-input
                v-model="activeData.prepend"
                placeholder="请输入前缀"
            />
        </el-form-item>
        <el-form-item
            v-if=" activeData.__slot__ && activeData.append !== undefined "
            label="后缀"
        >
            <el-input
                v-model="activeData.append"
                placeholder="请输入后缀"
            />
        </el-form-item>
        <el-form-item
            v-if="activeData['prefix-icon'] !== undefined"
            label="前图标"
        >
            <el-input
                v-model="activeData['prefix-icon']"
                placeholder="请输入前图标名称"
            >
                <el-button
                    slot="append"
                    icon="el-icon-thumb"
                    @click="openIconsDialog('prefix-icon')"
                >
                    选择
                </el-button>
            </el-input>
        </el-form-item>
        <el-form-item
            v-if="activeData['suffix-icon'] !== undefined"
            label="后图标"
        >
            <el-input
                v-model="activeData['suffix-icon']"
                placeholder="请输入后图标名称"
            >
                <el-button
                    slot="append"
                    icon="el-icon-thumb"
                    @click="openIconsDialog('suffix-icon')"
                >
                    选择
                </el-button>
            </el-input>
        </el-form-item>
        <el-form-item
            v-if="activeData.autosize !== undefined"
            label="最小行数"
        >
            <el-input-number
                v-model="activeData.autosize.minRows"
                :min="1"
                placeholder="最小行数"
            />
        </el-form-item>
        <el-form-item
            v-if="activeData.autosize !== undefined"
            label="最大行数"
        >
            <el-input-number
                v-model="activeData.autosize.maxRows"
                :min="1"
                placeholder="最大行数"
            />
        </el-form-item>
        <el-form-item
            v-if="activeData.maxlength !== undefined"
            label="最多输入"
        >
            <el-input
                v-model="activeData.maxlength"
                placeholder="请输入字符长度"
            >
                <template slot="append">
                    个字符
                </template>
            </el-input>
        </el-form-item>
        <el-form-item
            v-if="activeData['show-word-limit'] !== undefined"
            label="输入统计"
        >
            <el-switch v-model="activeData['show-word-limit']" />
        </el-form-item>
        <div
            v-if="activeData.config.dataType"
            class="reg-item"
        >
            <el-form-item v-if="activeData.config.dataType" label="反馈类型">
                <el-select v-model="activeData.config.dataType.type" size="mini" @change="dataTypeChange">
                    <el-option v-for="option in dataTypeList" :key="option.value" :value="option.value" :label="option.label" />
                </el-select>
            </el-form-item>
            <el-form-item v-if="activeData.config.dataType.type" label="错误提示" style="margin-bottom: 0">
                <el-input v-model="activeData.config.dataType.message" placeholder="请输入错误提示" />
            </el-form-item>
        </div>
        <icons-dialog
            :current="activeData[currentIconModel]"
            :visible.sync="iconsVisible"
            @select="setIcon"
        />
    </div>
</template>

<script>
import IconsDialog from '../IconsDialog'

export default {
    name: 'ConfigItemInput',
    components: {
        IconsDialog
    },
    props: ['activeData'],
    data() {
        return {
            dataTypeList: [
                {
                    value: null,
                    label: '无校验'
                },
                {
                    value: 'string',
                    label: '字符串'
                }, {
                    value: 'number',
                    label: '数字'
                }, {
                    value: 'boolean',
                    label: '布尔值'
                }, {
                    value: 'integer',
                    label: '整数'
                }, {
                    value: 'float',
                    label: '小数'
                }, {
                    value: 'url',
                    label: 'URL地址'
                }, {
                    value: 'email',
                    label: '邮箱地址'
                }, {
                    value: 'phone',
                    label: '手机号'
                }, {
                    value: 'identity',
                    label: '身份证号'
                }, {
                    value: 'hex',
                    label: '十六进制'
                }
            ],
            iconsVisible: false,
            currentIconModel: null
        }
    },
    methods: {
        dataTypeChange(value) {
            this.activeData.config.dataType.message = `请输入正确的${this.dataTypeList.find(item => item.value === value).label}`
        },
        openIconsDialog(model) {
            this.iconsVisible = true
            this.currentIconModel = model
        },
        setIcon(val) {
            this.activeData[this.currentIconModel] = val
        }
    }
}
</script>

<style scoped>

</style>
